<template>
  <div>
    <el-container>
      <el-header height="120px">
        <miao-sha-header></miao-sha-header>
      </el-header>
      <el-main>
        <p class="goods_head">秒杀商品详情</p>
        <el-form label-position="left" label-width="120px">
          <el-form-item label="商品名称：">{{ miaoShaGoods.goods.name }}</el-form-item>
          <el-form-item label="商品图片："><img :src="getSrcUrl(miaoShaGoods.goods.image)"/></el-form-item>
          <el-form-item label="商品原价：">{{ miaoShaGoods.goods.price + '元' }}</el-form-item>
          <el-form-item label="秒杀价：">{{ miaoShaGoods.price + '元' }}</el-form-item>
          <el-form-item label="库存数量：">{{ miaoShaGoods.stock }}</el-form-item>
          <el-form-item label="秒杀开始时间：">
            {{ this.miaoShaGoods.startTime }}
            <span v-show="miaoShaGoods.miaoShaStatus === 0">秒杀倒计时：{{ miaoShaGoods.remainBeginSecond }}秒</span>
            <span v-show="miaoShaGoods.miaoShaStatus === 1">秒杀进行中</span>
            <span v-show="miaoShaGoods.miaoShaStatus === 2">秒杀结束</span>
          </el-form-item>
          <el-form-item label="秒杀结束时间：">
            {{ this.miaoShaGoods.endTime }}
          </el-form-item>
          <el-form-item>
            <img id="verifyCodeImg" width="80" height="32" :src="verifyCodeImgSrc" v-show="miaoShaGoods.miaoShaStatus === 1" @click="handleRefreshVerifyCode"/>
            <input id="verifyCode" type="text" style="width: 60px;height: 23px;padding: 4px;border: 1px solid gray;" v-model="verifyCode" v-show="miaoShaGoods.miaoShaStatus === 1"/>
            <el-button v-show="miaoShaGoods.miaoShaStatus === 1" type="primary" size="small" @click="handleMiaoSha">立即秒杀</el-button>
            <el-alert> {{ miaoShaResult }}</el-alert>
          </el-form-item>
        </el-form>
      </el-main>
      <el-footer>
        <miao-sha-footer></miao-sha-footer>
      </el-footer>
    </el-container>
  </div>
</template>

<script>

import MiaoShaHeader from "./Header"
import MiaoShaFooter from "./Footer"

export default {
  name: "Detail",
  data() {
    return {
      miaoShaGoods: {
        goods: {
          name: '',
          image: 'default.jpg',
          price: 0
        }
      },
      verifyCodeImgSrc: "",
      verifyCode: "",
      miaoShaResult: "",
    }
  },
  components: {
    MiaoShaHeader,
    MiaoShaFooter
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    getSrcUrl(image) {
      return this.$sysConfig.backUrl + '/image/' + image;
    },
    getInfo() {
      let params = {id: this.$route.params.id}
      this.$axios.get("miaoShaGoods/detail", {params}).then(response => {
        this.miaoShaGoods = response.data.data;
        if (this.miaoShaGoods.remainEndSecond > 0) { // 剩余时间
          this.countDown();     // 倒计时
        }
      }).catch(error => {
        this.$message.error(error + "-请联系管理员")
      })
    },
    countDown() {   //倒计时
      let timeout;
      let remainBeginSecond = this.miaoShaGoods.remainBeginSecond;   //剩余时间
      //  秒杀状态   0还没开始 1秒杀杀中 2秒杀结束 4秒杀排队中
      if (remainBeginSecond > 0) {  // 秒杀还没开始，1秒-1倒计时
        timeout = setTimeout(() => {
          this.miaoShaGoods.remainBeginSecond = this.miaoShaGoods.remainBeginSecond - 1;
          this.countDown();
        }, 1000)
      } else if (remainBeginSecond === 0) {  // 秒杀进行中
        this.miaoShaGoods.miaoShaStatus = 1;
        this.verifyCodeImgSrc = this.$sysConfig.backUrl + "/verifyCode/get?miaoShaGoodsId=" + this.$route.params.id + "&token=" + window.sessionStorage.getItem("token");
      } else {  // 秒杀结束
        this.miaoShaGoods.miaoShaStatus = 2;
        if (timeout) {
          clearTimeout(timeout);
        }
      }
    },
    handleRefreshVerifyCode() {
      this.verifyCodeImgSrc = this.$sysConfig.backUrl + "/verifyCode/get?miaoShaGoodsId=" + this.$route.params.id + "&token=" + window.sessionStorage.getItem("token") + "&timestamp=" + new Date().getTime();
    },
    handleMiaoSha() {
      //  秒杀状态   0还没开始 1秒杀杀中 2秒杀结束 4秒杀排队生成订单中
      this.$axios.get("miaoSha?miaoShaGoodsId=" + this.$route.params.id + "&verifyCode=" + this.verifyCode)
        .then(response => {
          let data = response.data;
          if (data.code === 0) {    //排队生成订单中
            this.miaoShaGoods.miaoShaStatus = 4;
            this.miaoShaResult = data.msg;
            this.getMiaoShaResult(this.$route.params.id); //轮询查询订单结果
          } else {
            this.$message.error(data.msg)
            this.miaoShaResult = data.msg;
          }
        })
        .catch(error => {
          this.$message.error(error + "-请联系管理员")
        })
    },
    getMiaoShaResult(miaoShaGoodsId) {
      // 秒杀成功 订单id，秒杀失败 -1，排队秒杀中 0
      this.$axios.get("miaoSha/result?miaoShaGoodsId=" + this.$route.params.id).then(response => {
        let data = response.data
        if (data.code !== 0) {     // 未查询到结果
          alert(data.msg)
          return
        }
        if (data.result === '0') {         //排队生成订单中
          setTimeout(() => {this.getMiaoShaResult(miaoShaGoodsId)}, 50);
        } else if (data.result === -1) {    //秒杀失败
          this.miaoShaResult = "秒杀失败"
        } else {                            //生成订单成功
          this.$message.success("秒杀成功！")
          this.$router.push({name:'OrderInfo',params:{id:data.result}});
        }
      })
        .catch(error => {
          alert(error + "-请联系管理员")
        })
    }
  }
}
</script>

<style scoped>

.goods_head {
  font-weight: bold;
  font-size: 20px;
}
</style>
